<!--
*@Author: QWP
*@Description: 分享群聊二维码
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs"
    okText="分享二维码"
    :hideBtns="['close']"
    @close="dialogClose">
    <a-row :align="'middle'">
      <a-row justify="center"  :align="'middle'"  class="f-w-100 f-margin-t50">
        <a-space>
          <CheckCircleOutlined style="font-size: 18px ;color: #52C41A;"/>
          <span style="font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #333333;">自动生成二维码成功</span>
        </a-space>
      </a-row>
      <a-row justify="center" class="f-w-100 f-margin-t20">
        <span style="font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #666666;">扫码二维码即可加入群聊，或者分享此二维码</span>
      </a-row>
      <a-row justify="center" class="f-w-100 f-margin-t40 f-padding-b20">
        <div style="padding: 6px; border: 1px solid #D9D9D9; border-radius: 16px">
          <a-qrcode :value="keyid" />
        </div>
      </a-row>
    </a-row>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';

const props = defineProps<{
  keyid?: string
}>()
const route = useRoute()


const formRef = ref<FormInstance>()
const form = reactive({})
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '90px',
  colon: false
}
const formEls: Array<_IFormEl> = [
  { label: '群名称', key: 'title', col: { span: 24,}, element: 'input', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '申请单位', key: 'swbm', col: { span: 12 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '申请人', key: 'sqr', col: { span: 12 }, element: 'input', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '联系电话', key: 'lxdh', col: { span: 12 }, element: 'input', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '人员类型', key: 'rylx', col: { span: 12 }, element: 'select', 
    formItemProps: { ...formItemProps, required: true } 
  },
  { label: '申请时间', key: 'zcflmc', col: { span: 12 }, element: 'datepicker', 
    formItemProps: { ...formItemProps, required: true } 
  },
]

// 弹窗关闭
const dialogClose = () => {
  formRef.value.form.resetFields();
}
</script>

<style lang='scss' >
</style>